<template>
  <div>
    <a-button type="primary" @click="save" style="margin-left: 2px">
      保存
    </a-button>
    <a-button @click="openAttributeModel" style="margin-left: 10px">
      属性
    </a-button>

    <a-tabs type="card" style="margin-top: 15px">
      <a-tab-pane key="1" tab="数据源">
        <a-form :label-col="{ span: 4 }" :wrapper-col="{ span: 14 }">
          <a-form-item label="类型">
            <a-radio-group v-model:value="setting.options.resource">
              <a-radio value="1">TSQ语句</a-radio>
              <a-radio value="2">系统数据</a-radio>
              <a-radio value="3">静态数据</a-radio>
            </a-radio-group>
          </a-form-item>
          <div v-show="setting.options.resource == '1'">
            <!-- TSQ语句 -->
            <a-form-item label="数据库">
              <a-select
                v-model:value="setting.options.dbId"
                placeholder="请选择"
              >
                <a-select-option
                  v-for="(item, index) in linkDbData"
                  :key="index"
                  :value="item.id"
                >
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>

            <a-form-item label="SQL">
              <a-textarea
                :rows="5"
                v-model:value="setting.options.sql"
                placeholder="请输入sql语句"
              />
            </a-form-item>
          </div>
          <!-- 系统数据 -->
          <a-form-item label="请选择" v-show="setting.options.resource == '2'">
            <a-select
              v-model:value="setting.options.region"
              placeholder="请选择方法"
            ></a-select>
          </a-form-item>
          <!-- 静态数据 -->
          <a-form-item label="数据" v-show="setting.options.resource == '3'">
            <a-textarea
              :rows="5"
              v-model:value="setting.options.stateData"
              placeholder="请输入静态数据"
            />
          </a-form-item>
          <a-form-item
            :wrapper-col="{ span: 14, offset: 4 }"
            v-show="setting.options.resource == '1'"
          >
            <a-button @click="selectSQL">查询数据</a-button>
          </a-form-item>
        </a-form>
      </a-tab-pane>
      <a-tab-pane key="2" tab="参数编辑">
        <a-form :label-col="{ span: 4 }" :wrapper-col="{ span: 14 }">
          <a-form-item class="mb-1" label="高度">
            <a-input-number
              style="width: 200px"
              v-model:value="height"
              @blur="blur"
            ></a-input-number>

            <a-input-number
              style="display: none"
              v-model:value="setting.options.height"
            ></a-input-number>
          </a-form-item>

          <a-form-item class="mb-1" label="类型">
            <a-select v-model:value="setting.options.type">
              <a-select-option value="line">线条</a-select-option>
              <a-select-option value="column">柱状图</a-select-option>
              <a-select-option value="pie">饼图</a-select-option>
              <a-select-option value="liquid">水波图</a-select-option>
              <a-select-option value="wordCloud">词语图</a-select-option>
            </a-select>
          </a-form-item>

          <template
            v-if="
              setting.options.type === 'line' ||
              setting.options.type === 'column'
            "
          >
            <a-form-item class="mb-1" label="属性(x)">
              <a-select v-model:value="setting.options.xField">
                <a-select-option
                  v-for="item in setting.options.filedList"
                  :key="item"
                  :value="item"
                >
                  {{ item }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item class="mb-1" label="值(y)">
              <a-select v-model:value="setting.options.yField">
                <a-select-option
                  v-for="item in setting.options.filedList"
                  :key="item"
                  :value="item"
                >
                  {{ item }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </template>
          <!-- 线条 -->
          <template v-if="setting.options.type === 'line'">
            <a-form-item class="mb-1" label="是否曲线">
              <a-switch v-model:checked="setting.options.smooth" />
            </a-form-item>
          </template>
          <!-- 柱状图 -->
          <template v-if="setting.options.type === 'column'">
            <a-form-item class="mb-1" label="最大宽度">
              <a-input-number
                style="width: 200px"
                v-model:value="maxWidth"
                @blur="setting.options.maxWidth = maxWidth"
              ></a-input-number>

              <a-input-number
                style="display: none"
                v-model:value="setting.options.maxWidth"
              ></a-input-number>
            </a-form-item>
          </template>

          <template v-if="setting.options.type === 'pie'"></template>

          <a-form-item label="其他配置(meta)" class="mb-1">
            <a-textarea
              v-model:value="setting.options.meta"
              :rows="4"
              placeholder="请输入配置"
            ></a-textarea>
          </a-form-item>
        </a-form>
      </a-tab-pane>
      <a-tab-pane key="3" tab="预览">
        <template v-if="setting.options.type == 'line'">
          <Fline :setting="setting"></Fline>
        </template>
        <template v-else-if="setting.options.type == 'column'">
          <Fcolumn :setting="setting"></Fcolumn>
        </template>
        <template v-else-if="setting.options.type == 'pie'">
          <Fpie :setting="setting"></Fpie>
        </template>
        <template v-else-if="setting.options.type == 'liquid'">
          <Fliquid :setting="setting"></Fliquid>
        </template>
        <template v-else-if="setting.options.type == 'wordCloud'">
          <FwordCloud :setting="setting"></FwordCloud>
        </template>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
  import {
    Fpie,
    Fcolumn,
    Fline,
    Fliquid,
    FwordCloud,
  } from '@/mycomponents/dataComponent/index'
  import { Get, Update } from '@/api/component/api'
  import { Gets } from '@/api/databaselink/api'
  import { Getsqlcolumns } from '@/api/report/api'
  export default {
    components: {
      Fpie,
      Fcolumn,
      Fline,
      Fliquid,
      FwordCloud,
    },
    props: ['selectId'],
    watch: {
      selectId(val) {
        this.getData(val)
      },
    },
    data() {
      return {
        setting: {
          options: {
            resource: '1',
          },
        },
        linkDbData: [],
        height: undefined,
        maxWidth: undefined,
      }
    },
    created() {
      Gets().then((res) => {
        if (res.isSuccess) {
          this.linkDbData = res.content.items
        }
      })
      this.getData(this.selectId)
    },

    methods: {
      openAttributeModel() {
        console.log('1111')
      },
      blur() {
        this.setting.options.height = this.height
      },
      getData(val) {
        Get({ id: val }).then((res) => {
          console.log(res)
          if (res.isSuccess) {
            this.formData = {
              name: res.content.name,
              componentType: res.content.componentType,
              dictId: res.content.dictId,
              note: res.content.Note,
            }
            this.setting = JSON.parse(res.content.json)

            this.height = JSON.parse(
              JSON.stringify(this.setting.options.height)
            )
            this.maxWidth =
              this.setting.options.maxWidth === undefined
                ? undefined
                : JSON.parse(JSON.stringify(this.setting.options.maxWidth))
          }
        })
      },
      save() {
        var data = {
          name: this.formData.name,
          componentType: this.formData.componentType,
          dictId: this.formData.dictId,
          Json: JSON.stringify(this.setting).toString(),
          note: this.formData.note,
        }
        console.log(typeof JSON.stringify(this.setting))
        console.log(data)
        Update({ id: this.selectId }, data).then((res) => {
          if (res.isSuccess) {
            this.$message.success('配置保存成功！', 2.5)
          } else {
            this.$message.error(res.message)
          }
        })
      },
      selectSQL() {
        var that = this
        Getsqlcolumns({
          DbId: that.setting.options.dbId,
          Sql: that.setting.options.sql,
        }).then((res) => {
          if (res.isSuccess) {
            this.$message.success('参数返回成功，请至参数编辑进行设置')
            this.setting.options.filedList = res.content.items
          } else {
            this.$message.error('sql语句语法错误' + res.message)
          }
        })
      },
    },
  }
</script>
